<template>
    <div>
        <h1  align="center">会员增加</h1>
    </div>
    <table  class="table table-bordered">
        <tbody>
            <tr>
                <td align="right">会员编号</td>
                <td><input type="text" v-model="info.numberCode" disabled></td>
            </tr>
           
            <tr>
                <td align="right">手机号</td>
                <td><input type="text"  v-model="info.numberTel" maxlength="11"></td>
            </tr>
            <tr>
                <td align="right">姓名</td>
                <td><input type="text"  v-model="info.userName"></td>
            </tr>
             <tr>
                <td align="right">证件类型</td>
                <td>
                    <select   v-model="info.cardType">
                        <option value="">请选择</option>
                        <option v-for="i in arr"  :value="i" >{{ i }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">身份证号</td>
                <td><input type="text"  v-model="info.card" maxlength="18"></td>
            </tr>
            <tr>
                <td align="right">会员生日</td>
                <td><input type="date"  v-model="info.birthday"></td>
            </tr>
            <tr>
                <td align="right">会员积分</td>
                <td><input type="text"  v-model="info.score"></td>
            </tr>
            <tr>
                <td align="right">会员余额</td>
                <td><input type="text"  v-model="info.money"></td>
            </tr>
            <tr>
                <td align="right">会员等级</td>
                <td>
                    <select  v-model="info.mumberLevelId">
                        <option value="">请选择</option>
                        <option  v-for="i in levelList" :value="i.mumberLevelId">{{ i.mumberLevelName }}</option>
                    </select>
                </td>
            </tr>
             <tr>
                <td align="right">会员爱好</td>
                <td>
                    <input type="checkbox"  v-model="info.likes" name="likes" value="唱">唱
                    <input type="checkbox"  v-model="info.likes" name="likes" value="跳">跳
                    <input type="checkbox"  v-model="info.likes" name="likes" value="rap">rap
                    <input type="checkbox"  v-model="info.likes" name="likes" value="打篮球">打篮球
                </td>
            </tr>
             <tr>
                <td align="right">会员性别</td>
                <td>
                    <input type="radio"  v-model="info.sex" :value="0" name="sex">男
                    <input type="radio"  v-model="info.sex" :value="1" name="sex">女
                </td>
            </tr>
             <tr>
                <td align="right">会员简介</td>
                <td>
                    <textarea row="5" cols="50"  v-model="info.desc"></textarea>
                </td>
            </tr>
            <tr>
                <td align="right">是否同意条款</td>
                <td>
                    <input type="checkbox"  v-model="info.isAgree">xxx条款
                </td>
            </tr>
             <tr>
                <td ></td>
                <td><input type="buytton" value="确定" @click="ok()" class="btn btn-info"></td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import axios from "axios";
import moment from "moment";
import { ref,reactive,onMounted} from "vue";
import router from "@/router";

//onMounted生命周期钩子函数(12个)(相当于文档就绪函数)
onMounted(()=>{
    //发送网络请求获取登记列表
    getLevelList();
});
//声明一个数组
let arr:any=ref(["身份证","华侨身份证",'港澳身份证','临时身份证'])
//声明一个变量获取增加会员所需的数据
let info:any=reactive({
 
  numberCode: moment(new Date()).format('YYYYMMDD')+ Math.random().toString().substring(2,5),
  numberTel: "",
  userName: "",
  card: "",
  birthday: "",
  score: "",
  money: "",
  mumberLevelId: "",
  sex: "",
  likes: [],
  desc: "",
  isAgree: "",
  cardType: "",
  state: true
});

//声明一个变量接收等级列表  :any(声明类型)
let levelList:any = ref([]);


//获取会员等级列表
const getLevelList=()=>{
   axios({
        url:"/api/Mumber/GetMumberList",
        method:"get",
   })
   .then((res)=>{
    //后端返回的数据
        console.log(res);
        levelList.value=res.data;
   })
   .catch((err)=>{
        console.log(err);
   })
};

//做会员增加
const ok=()=>{
    //1.有效性判断
    if(info.numberTel=="")
    {
        alert("手机号不能为空");
        return;
    }
    //手机号为正确的手机号
    let regphone=/^1[3-9]\d{9}$/;
    if(!regphone.test(info.numberTel))
    {
        alert("手机号格式不正确");
        return;
    }
    if(info.userName=="")
    {
        alert("姓名不能为空");
        return;
    }
    if(info.card=="")
    {
        alert("身份证号码不能为空");
        return;
    }
     //身份证为正确的身份证
    let regcard=/^\d{17}[0-9xX]$/;
    if(!regcard.test(info.card))
    {
        alert("身份证号码格式不正确");
        return;
    }
    if(info.birthday=="")
    {
        alert("生日不能为空");
        return;
    }
     if(info.score=="")
    {
        alert("积分不能为空");
        return;
    }
     //积分
    let regscore=/^[+]?\d+$/;
    if(!regscore.test(info.score))
    {
        alert("积分只能为正数");
        return;
    }
     if(info.money=="")
    {
        alert("余额不能为空");
        return;
    }
     //余额
    if(!regscore.test(info.money))
    {
        alert("余额只能为正数");
        return;
    }
     if(info.mumberLevelId=="")
    {
        alert("类型必选");
        return;
    }
     if(info.desc=="")
    {
        alert("简介不能为空");
        return;
    }
     //积分
    let regdesc=/^[\u4e00-\u9fa5]{1,50}$/;
    if(!regdesc.test(info.desc))
    {
        alert("简介只能为50以内的汉字");
        return;
    }
     if(info.isAgree==false)
    {
        alert("必须同意条款");
        return;
    }
    info.likes=info.likes.toString();
    //2.做增加操作
    axios({
        url:"/api/Mumber/AddNumber",
        method:"post",
        data:info,
    })
    .then((res)=>{
        console.log(res);
        if(res.data==-1)
        {
            alert("手机号已存在");
            return;
        }
        if(res.data>0)
        {
            alert("添加成功");
            //跳转到会员列表
            router.push('/shownumber');
            return;
        }
    })
    .catch((err)=>{
        console.log(err);
    })
};


</script>

<style scoped>

</style>